<!DOCTYPE html>
<html>
<head>
	<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3419308738737930"
	     crossorigin="anonymous"></script>
  <title>千千万能工具箱-lol英雄资料</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="utf-8">
<style>
/*  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  } */
</style>
</head>
<body>
  <div id="app">


<van-row>
  <van-col span="24"><van-search
  v-model="value"
  placeholder="请输入英雄名称,昵称,外号"
  input-align="center"
  @search="searchHero"
  @clear="reset"
  :clearable="false"
/></van-col>

</van-row>
<!-- <van-image
  width="4rem"
  height="4rem"
  src="http://game.gtimg.cn/images/lol/act/img/champion/Annie.png"
/>
 -->
<!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item>1</van-swipe-item>
  <van-swipe-item>2</van-swipe-item>
  <van-swipe-item>3</van-swipe-item>
  <van-swipe-item>4</van-swipe-item>
</van-swipe> -->
<div v-for="(item,index) in heroData">
	<div style="margin-top: 10px;">
	<van-row>
	  <van-col  span="6"  style="text-align: center;" v-for="(zitem,zindex) in item"><img 
  width="64"
  height="64"
:src="zitem.heroHead"
@click="toDetail(zitem.heroId)"

/>

	</van-row>
	<van-row>
	  <van-col span="6" style="text-align: center;" v-for="(zitem,zindex) in item">
		  <span style="font-size: 15px; color:grey; " @click="toDetail(zitem.heroId)">{{zitem.name}}</span>
		  
</van-col>

	</van-row>

</div>

</div>

<br/>

<br/>

<van-overlay :show="show"  />
  </div>

<!-- 引入样式文件 -->
<link
  rel="stylesheet"
  href="../../js/vant4/index.css"
/>

<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="../../js/jquery.min.js"></script>
<script src="../../js/vue3/vue3.js"></script>
<script src="../../js/vant4/vant.min.js"></script>

<script>
	// const baseUrl="http://192.168.1.121:8848"
		const baseUrl = "https://api.lqcpws.cn"
  // 在 #app 标签下渲染一个按钮组件
  const app = Vue.createApp({
  data(){
	return {
		title :'hello',
		value :"",
		heroList:[],
		heroData:[],
		show:false,
	}
  },
  methods:{
	  reset(){
		  console.log('-re')
		  this.value=""
		this.searchHero("")  
	  },
	  searchHero(val){
		  let _this=this
		  _this.show=true
		  $.ajax({
			  type:'get',
			  url:baseUrl+'/pc/lolHero/getLolHeroList',
			  data:{name:_this.value},
			  success(res) {
			  	_this.heroList=res.data
				_this.heroData=_this.splitList(_this.heroList,4)
			   _this.show=false
			  }
			  
			  
		  })
		  
		  
	  },
	  splitList(data,limit){
		  let size=data.length%limit==0?data.length/limit: parseInt(data.length/limit)+1
		  let dataArray=[]
		  let start=0
		  for(let i=0;i<size;i++){
			  let tempArray=[]
			  for(let j=0;j<limit;j++){
				  if(start<data.length){
				  tempArray.push(data[start++])
				  }else{
					  break;
				  }
			  }
			  dataArray.push(tempArray)
		  }
		  return dataArray;
	  },
	  toDetail(id){
		  window.location.href='./detail.html?id='+id
	  },
	  requestCount() {
	  	// let ys=	LZString.compressToBase64(JSON.stringify(nes.toJSON()))
	  	// 	console.log(JSON.parse(LZString.decompressFromBase64(ys)))
	  	let _this = this
	  	$.ajax({
	  		type: 'get',
	  		url: baseUrl + "/pc/requestCountByDay",
	  		success: function(res) {
	  
	  
	  		}
	  
	  
	  	})
	  
	  },
  },
  mounted(){
	  // console.log('--mo---')
	  this.searchHero("")
	  this.requestCount()
	  
  }
  });
  app.use(vant);

  // 通过 CDN 引入时不会自动注册 Lazyload 组件
  // 可以通过下面的方式手动注册
  app.use(vant.Lazyload);


  app.mount('#app');
  </script>
</body>
</html>